<template>
  <div class="basicSearch" style="padding: 0 10%;padding-right: 7%;">
    <div class="d-flex flex-column align-items-center db-title">
      <div></div>
      <div class="fa mt-4 mb-2">
        <icon name="cubes" scale="2.7" style="margin-top: -12px;color: #bf6550;"></icon>
        <span class="display-4 ml-4" id="mycard">力场数据库</span>
      </div>
    </div>
    <div class="morePage">
      <div class="firstType">
        <div class="search-container">
          <el-input placeholder="请输入C、H、O、N等相关元素，以逗号隔开" v-model="searchQuery" class="input-with-select"
            @keyup.enter.native="performSearch">
            <template slot="prepend">检索内容</template>
            <el-button slot="append" icon="el-icon-search" @click="performSearch"></el-button>
          </el-input>
        </div>
      </div>
      <div class="secondType">
        <div class="menu-container">
          <!-- 使用 el-menu 创建纵向菜单 -->
          <el-row type="flex" justify="start">
            <el-col :span="5">
              <el-menu default-active="1" class="el-menu-vertical-demo" background-color="transparent" text-color="black" 
                active-text-color="rgb(180,72,13)" @open="handleOpen" @close="handleClose">
                <el-menu-item index="1" @click.native="showSubMenu('module1')">
                  <!-- <i class="el-icon-s-home"></i> -->
                  <span slot="title">二面角</span>
                </el-menu-item>
                <el-menu-item index="2" @click.native="showSubMenu('module2')">
                  <span slot="title">模块二</span>
                </el-menu-item>
                <el-menu-item index="3" @click.native="showSubMenu('module3')">
                  <!-- <i class="el-icon-info"></i> -->
                  <span slot="title">模块三</span>
                </el-menu-item>
                <el-menu-item index="4" @click.native="showSubMenu('module4')">
                  <!-- <i class="el-icon-phone"></i> -->
                  <span slot="title">模块四</span>
                </el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="19">
              <div class="submenu-container" v-if="visibleSubMenu === 'module1'">
                <el-menu :default-active="activeSubIndex" mode="vertical" background-color="#fff" text-color="#000">
                  <el-menu-item index="2-1">二面角</el-menu-item>
                  <el-menu-item index="2-2">二面角相关介绍说明</el-menu-item>
                </el-menu>
              </div>
              <div class="submenu-container" v-if="visibleSubMenu === 'module2'">
                <el-menu :default-active="activeSubIndex" mode="vertical" background-color="#fff" text-color="black">
                  <el-menu-item index="2-1">模块二</el-menu-item>
                  <el-menu-item index="2-2">模块二相关介绍说明</el-menu-item>
                </el-menu>
              </div>
              <div class="submenu-container" v-if="visibleSubMenu === 'module3'">
                <el-menu :default-active="activeSubIndex" mode="vertical" background-color="#fff" text-color="black">
                  <el-menu-item index="2-1">模块三</el-menu-item>
                  <el-menu-item index="2-2">模块三相关介绍说明</el-menu-item>
                </el-menu>
              </div>
              <div class="submenu-container" v-if="visibleSubMenu === 'module4'">
                <el-menu :default-active="activeSubIndex" mode="vertical" background-color="#fff" text-color="black">
                  <el-menu-item index="2-1">模块四</el-menu-item>
                  <el-menu-item index="2-2">模块四相关介绍说明</el-menu-item>
                </el-menu>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="pageFooter">
      <b-row>
        <db-intro :header="'数据库说明'"
          :introContent="['混合燃料依据来源分为石油基燃料、煤基燃料、生物质燃料以及其他，可直接点击列表名称进行检索。', '检索结构包含混合燃料基本组成信息、物理化学性质和高温理化性能等数据，数据来源包括公开发表文献和实验测试结果等。']"></db-intro>
      </b-row>
    </div>
    <!-- <notice-modal v-model="fail_modal" type="error" :errMessage="errMessage"></notice-modal> -->
  </div>

</template>

<script>
// import {jsme} from "@/assets/jsme/jsme.nocache.js"
// import SideBar from '@/components/base/SideBar'
//   import JsmeEditor from "@/components/JSME";
//   import TagCloud from "@/components/TagCloud";
//   import FileUpload from "@/components/FileUpload";
//   import ChemDoodle from "@/components/ChemDoodle";
import DbIntro from "./preView/components/DBIntro.vue";
import NoticeModal from "../components/NoticeModal.vue";
//   import MathInline from "@/components/base/MathInline";
//   import { Decimal } from 'decimal.js'
//   import axios from 'axios'

export default {
  name: "ThermoSearch",
  components: {
    //   SideBar,
    //   JsmeEditor,
    //   TagCloud,
    //   FileUpload,
    //   ChemDoodle,
    DbIntro,
    NoticeModal,
    //   MathInline
  },
  file: null,
  data() {
    return {
      searchQuery: '', // 用户输入的查询字符串
      visibleSubMenu: 'module1', // 控制哪个二级菜单可见
      activeSubIndex: '2-1', // 默认激活的二级菜单项索引
    }
  },
  methods: {
    /**
    * @Title 检索内容
    * @Author wcw
    * @Date 2024/12/24 10:31:20
    */
    // 执行搜索
    performSearch() {
      if (!this.searchQuery.trim()) {
        this.$message.warning('请输入搜索关键词');
        return;
      }
      console.log('Performing search for:', this.searchQuery);
      // 在这里添加实际的搜索逻辑或路由跳转
    },

    /**
    * @Title 二级菜单
    * @Author wcw
    * @Date 2024/12/24 10:49:06
    */
    handleOpen(key, keyPath) {
      console.log('Opened menu item:', key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log('Closed menu item:', key, keyPath);
    },
    showSubMenu(menu) {
      this.visibleSubMenu = menu;
    },
    hideSubMenu() {
      this.visibleSubMenu = null;
    },
  },
  watch: {},
  mounted() {
    console.log('232131313');
    //   this.flyData()
  },
  computed: {}
};
</script>

<style lang='scss'>
.basicSearch {

  @media screen and (min-width: 988px) {
    .search-method {
      max-width: 9rem;
    }

    .search-match {
      max-width: 8rem;
    }

    .btn-select {
      max-width: 200px;
    }
  }

  @media screen and (max-width: 768px) {
    .btn-search {
      margin-right: 10px;
      float: right;
      max-width: 18%;
    }
  }

  @media screen and (max-width: 590px) {
    .btn-select {
      width: 91%;
    }

    .thermo_flex_input {
      width: 91%;
    }
  }

  .morePage {
    .firstType {
      margin-bottom: 15px;

      .header {
        display: flex;
        align-items: center;

        .icon {
          width: 4px;
          height: 20px;
          margin-right: 5px;
          background-color: rgb(180, 72, 13)
        }

        .title {
          font-size: 1.5rem;
          color: #000
        }

      }

    }

  }

  .pageFooter {
    .header {
      display: flex;
      align-items: center;
      margin-top: 30px;

      .icon {
        width: 4px;
        height: 20px;
        margin-right: 5px;
        background-color: rgb(180, 72, 13)
      }

    }

    .info {
      margin-top: 10px;
      font-size: 1rem;
      text-align: left;
    }
  }

  .btn-search {
    height: 50px;
    line-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 5px;
    /* vertical-align: revert; */
    background-color: rgb(46, 134, 171);
    max-width: 120px;
    font-size: 1.5rem;
  }


  .fontClass {
    font-size: 1.8rem !important;
    font-weight: 700;
  }

  .search-method {
    line-height: 42px;
    font-size: 1.6rem;
    height: 50px;

  }
}




@media screen and (max-width: 700px) {
  .nav-tab-wrap .nav-list .nav-item {
    font-size: 1rem;
  }
}

.search-container {
  width: 500px;
}
.menu-container {
  display: flex;
  height: 300px; /* 设置容器高度为视口高度 */
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-dropdown-menu__item, .el-menu-item{
  font-size: 20px;
}

.submenu-container {
  padding: 20px;
  position: absolute;
  top: 0;
  left: 200px; /* 根据左侧菜单宽度调整 */
  width: 1000px;
  height: 300px;
  background-color: #fff;
  z-index: 1000;
  border-left: 1px solid #e6e6e6;
}
</style>